<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>注册</title>
    <link rel="stylesheet" href="__PUBLIC__/assets/mobile/lib/layer/mobile/need/layer.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/mobile/common/base.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/mobile/css/login.css">
</head>
<body>
<div class="login">
    <i class="go-back" onclick="javascript:history.go(-1);">
        <img src="__PUBLIC__/assets/mobile/img/go-back.png" alt="">
    </i>
    <div class="login-top">
        <ul>
            <li class="not-pitch" onclick="window.location.href='login'">登录</li>&nbsp;&nbsp;&nbsp;
            <li class="pitch">注册</li>
        </ul>
        <h1 class="login-title">任我赚</h1>
    </div>
    <ul class="form">
        <li>
            <input type="text" placeholder="输入手机号" class="phone">
        </li>
        <li>
            <input type="text" placeholder="输入验证码" class="yanzhengma">
            <img src="{:captcha_src()}" class="word-code" onclick="wordcode()">
        </li>
        <li>
            <input type="text" placeholder="短信验证码" class="duanxin-code">
            <span class="get-code" onclick="getSms()">获取验证码</span>
            <span class="count-down hide"><span></span>s</span>
        </li>
        <li>
            <input type="password" placeholder="密码建议至少使用两种字符组合" class="register-password">
        </li>
    </ul>
    <div class="login-bottom clearfix">
        <div class="login-bottom-l fl">
            <input type="radio" class="choose fl">
            <span class="fl">记住我</span>
        </div>
        <a href="javascript:;" class="login-bottom-r fr">忘记密码?</a>
    </div>
    <div class="register-btn">
        <a href="javascript:;">立即注册</a>
    </div>
    <div class="login-hint">提示:租号玩账号可直接登录</div>
    <div class="protocol">
        <span>点击立即注册即代表您同意</span>
        <a href="{:url('protocolOne')}">《任我赚注册协议》</a>
        <a href="{:url('protocolTwo')}">《租号玩服务协议》</a>
    </div>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/assets/mobile/lib/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/assets/mobile/lib/layer/layer.js"></script>
<script>
    function wordcode(){
        $('.word-code').attr('src' , '{:captcha_src()}?r=' + Math.random());
    };
    $(function () {
        // 注册提交
        $('.register-btn').click(function () {
            var _registerPassWord = $('.register-password').val();
            var _infoCode = $('.duanxin-code').val();
            var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
                    regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
            if (_infoCode == '') {
                layer.msg("短信验证码不能为空");
                return;
            }
            else if (_registerPassWord.length<6) {
                layer.msg("密码不能小于6位");
                return;
            }
            else if (_registerPassWord.length>15) {
                layer.msg("密码不能大于15位");
                return;
            }
            else if (regEn.test(_registerPassWord) || regCn.test(_registerPassWord)) {
                layer.msg("密码不能包含特殊字符");
                return;
            }
            var phone = $('.phone').val();
            var data={
                mobile      : phone,
                password    : _registerPassWord,
                infoCode    : _infoCode,
            };
            register(data);
        });
    });
    function register(data){
        $.ajax({
            type        : "POST",
            url         : '',
            data        : data,
            datatype    : "json",//"xml", "html", "script", "json", "jsonp", "text".
            success     : function(data){
                if(data.code == 1){
                    layer.msg(data.message);
                    setTimeout(function(){window.location.href='perfectInfo';},1000);
                }
                else{
                    wordcode();
                    layer.msg(data.message);
                }
            },
            error      : function(){
                    wordcode();
                layer.msg('未知错误请重试！');
            }
        });
    }
    function getSms(){
        if (check() == false){
            return;
        }
        var phone = $('.phone').val();
        var wordcode = $('.yanzhengma').val();
        var data={
            mobile      : phone,
            wordcode    : wordcode
        };
        $.ajax({
            type        : "POST",
            url         : 'getSms',
            data        : data,
            datatype    : "json",//"xml", "html", "script", "json", "jsonp", "text".
            success     : function(data){
                if(data.code == 1){
                    layer.msg(data.message);
                    jianjian();
                }
                else{
                    layer.msg(data.message);
                }
            },
            error      : function(){
                layer.msg('未知错误请重试！');
            }
        });
    }
    function check() {
        var _phone = $('.phone').val();
        var _wordCode = $('.yanzhengma').val();
        if(_phone.length == ''){
            layer.msg("手机号不能为空");
            return false;
        }
        else if (!(/^1[3|4|5|7|8|9][0-9]{9}$/.test(_phone))){
            layer.msg("手机号错误");
            return false;
        }
        else if ((/^170[0-9]{8}$/.test(_phone))){
            layer.msg("很抱歉，受服务限制您的手机号无法注册")
            return false;
        }
        else if (_wordCode == '') {
            layer.msg("验证码不能为空")
            return false;
        }
        return true;
    }
    function jianjian(){
        // 倒计时
        var time = 60;
        $('.get-code').hide();
        $('.count-down').show();
        $('.count-down span').html(time)
        var iCount = setInterval(function () {
            if( time > 0) {
                time --;
                $('.count-down span').html(time)
            } else {
                clearInterval(iCount);
                $('.get-code').show();
                $('.count-down').hide();
            }
        },1000);
    }
</script>
</html>